<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>线路列表</title>

    <link th:href="@{../layui/css/layui.css}" rel="stylesheet"/>
    <style>
        .box{
            width:500px;
            height:40px;
            border:2px solid #006EFF;
            margin:auto;
        }
        .input{
            float:left;
            width:400px;/*宽400*/
            height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
            outline:none;
            border:none;/*取消文本框内外边框*/
        }
        .button{
            cursor: pointer;
            float:left;
            width:100px;
            height:40px;
            color:white;
            background-color:#006EFF;/*将按钮背景设置为红色，字体设置为白*/
            border:none;
            outline:none;/*取消边框和外边框将按钮边框去掉*/
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>线路表</legend>
    </fieldset>



    <div class="box">
        <form th:action="@{/route/toRouteList}" method="post">
            <input type="text" class="input" name="titleName" th:value="${titleName}" placeholder="请输入线路名">
            <!--placeholder是文本框中的提示文字-->
            <input type="submit" value="搜索" class="button">
        </form>
    </div>

    <a th:href="@{/route/add}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon" ></i></button></a>


    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="50">
                <col width="100">
                <col width="300">
                <col width="100">
                <col width="300">
                <col width="100">
                <col width="100">
                <col width="100">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>线路ID</th>
                <th>线路名称</th>
                <th>线路简介</th>
                <th>价钱</th>
                <th>图片</th>
                <th>是否是主题</th>
                <th>商家名称</th>
                <th>创建时间</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="route:${pager.getList()}">
                <td th:text="${route.routeId}"></td>
                <td th:text="${route.title}"></td>
                <td th:text="${route.subheading}"></td>
                <td th:text="${route.price}"></td>
                <td> <img th:src="@{'/uploads/' + ${route.coverSrc}}"> </td>
                <td th:text="${route.istheme eq 1 ? '是':'否'}"></td>
                <td th:text="${route.shopName}"></td>
                <td th:text="${route.createTime}"></td>
                <td th:text="${route.cateName}"></td>

                <td>
                    <a href="" th:href="'/Route_Img/toRoute_Imglist?Route_Id=' + ${route.routeId}" >详情</a>
                    <a th:href="@{/route/edit(routeId=${route.routeId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
                    <a th:href="@{/route/deleteRoute(routeId=${route.routeId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页导航 -->
    <nav style="float: left;">
        <ul class="pagination">
            <li>
                <a th:href="@{/route/toRouteList(titleName=${titleName},currentPage=${pager.currentPage -1 &gt; 0 ? pager.currentPage -1 : 1})}">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <ul th:with="size=${pager.totalPage}">
                <li th:each="index: ${#numbers.sequence(1,size)}">
                    <a th:href="@{/route/toRouteList(titleName=${titleName},currentPage=${index})}" th:text="${index}"></a>
                </li>
            </ul>
            <li>
                <a th:href="@{/route/toRouteList(titleName=${titleName},currentPage=${pager.currentPage +1 &gt; pager.totalPage ? pager.totalPage : pager.currentPage+1})}">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </ul>
    </nav>
    <div style="float: right;margin-top: 25px;">
        <span>共<span th:text="${pager.total}"></span>条记录，分<span th:text="${pager.totalPage}"></span>页显示</span>
    </div>




    <script th:src="@{/layui/layui.js}"></script>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>
</html>